	<template>

	<view class="coupon_box">
		<!-- 		<view class="other_type">
			<view class="text"><span>全面型优惠券</span></view>
		</view>
		<coupon v-for="(item, index) in coupon[0].list" :key="index" v-bind:item="item" theme="#ff0000"></coupon> -->
		<!-- 		<view class="other_type">
			<view class="text"><span>简洁型优惠券</span></view>
		</view> -->
		<coupon v-for="(item, index) in list" :key="index" v-bind:item="item"  theme="#ff6c00"
			color="#ffffff" solid="#ff6c00" @use="use"></coupon>
		<u-empty mode="coupon" v-if="list.length == 0"></u-empty>
	</view>
</template>

<script>
	import coupon from '@/components/coolc-coupon/coolc-coupon';
	import * as UserApi from '@/api/user'
	export default {
		components: {
			coupon
		},
		data() {
			return {
				page: 1,
				list: []
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			getList() {
				UserApi.coupon_list({
					page: this.page
				}).then(res => {
					
					res.info.forEach(e => {
						e.show = false
					})
					
					this.list = this.list.concat(res.info) 
					console.log(this.list)

				})
			},
			use(item) {

			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: #ffffff;
	}

	.coupon_box {
		padding: 6upx 26upx 26upx 26upx;
	}

	.other_type {
		width: 100%;
		height: 90upx;
		padding-top: 50upx;

		.text {
			width: 100%;
			border-top: 1px solid #eeeeee;
			display: block;
			text-align: center;
			position: relative;
		}

		.text span {
			width: 180upx;
			height: 40upx;
			line-height: 40upx;
			color: #999999;
			display: block;
			background: #ffffff;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -90upx;
			margin-top: -20upx;
			font-size: 28upx;
		}
	}
</style>